<template>
  <div>
    <head-nav :isBack="isBack"></head-nav>
    <div class="zanwei-top"></div>
    <div v-if="newsPageData">
      <div class="detailbox">
        <div class="bt">
          {{newsPageData.WZBT}}
        </div>
        <div class="weizhi">
          <span style="color: #576b95;">{{newsPageData.ZZ}}</span>
          <span class="ly">{{newsPageData.FBSJ}}</span>
          <span id="yd"><i class="iconfont icon-yuedu"></i> {{newsPageData.YDS}}</span>
        </div>
        <div class="content" v-html="newsPageData.WZNR" style="overflow-x: hidden;"></div>
        <div class="bt_bar">
          <span id="pl"><i class="iconfont icon-iconfontpinglun "></i>{{newsPageData.PLS}}</span>
          <span v-if="newsPageData.SFDZ" id="dz" @click="dzFn"><i
            class="iconfont icon-dianzan "></i>{{newsPageData.DZS}}</span>
        </div>
      </div>
      <div class="line20"></div>
      <!-- 评论 -->
      <div class="plbox" v-if="newsPageData.SFPL === 1">
        <div class="pltop">
          <h3>评论</h3>
          <span class="yl" @click="openPj">写评论</span>
        </div>
        <div class="list pllist">
          <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"
              infinite-scroll-distance="10" infinite-scroll-immediate-check="false">
            <li class=" " v-for="(item,index) in pllist" :key="index">
              <a href="javascript:;">
                <div class="image">
                  <img :src="item.WXTX" alt="">
                </div>
                <div class=" text">
                  <div class="sjbox">
                    <p class="rdl">{{item.XM}}</p>
                    <p class="sj">{{item.date}}</p>
                  </div>
                  <p class="bt">{{item.PL}}</p>
                </div>
              </a>
            </li>
          </ul>
          <div class="list-loading" v-if="loading">
            <i class="iconfont icon-loading"></i> 加载中...
          </div>
        </div>
        <mt-popup
          v-model="popupVisible"
          position="bottom">
          <div class="fbpl" v-if="newsPageData.SFPL === 1">
            <div class="fbpltop">
              <h3>我要发表评论</h3>
            </div>
            <div>
              <div class="wbk">
                <mt-field placeholder="请输入评论的内容" type="textarea" rows="4"
                          v-model="plcontent"></mt-field>
              </div>
              <div class="fban" ref="bottom">
                <mt-button type="primary" size="large" @click.native="faplfn">发表评论</mt-button>
              </div>
            </div>
          </div>
        </mt-popup>

      </div>
    </div>
    <div v-else>
      <div class="tips">
        <img
          src="https://s10.mogucdn.com/p2/161213/upload_27e7gegi3f9acl5e05f3951if5855_514x260.png"
          alt="">
        <p>很抱歉，找不到你要访问的页面</p>
        <!--<mt-button type="primary" size="large" @click.native="$router.go(-1)">返回</mt-button>-->
      </div>
    </div>
    <!-- 占位 -->
    <!--<div class="zanwei"></div>-->
  </div>
</template>

<script>
  import {MessageBox, Toast} from "mint-ui";
  import api from '@/api/api'

  export default {
    data() {
      return {
        isBack: true,
        plcontent: "",
        pllist: [],
        wzid: '',
        newsPageData: {},
        userInfo: {},
        popupVisible: false,
        openid: '',
        vipcode: '',
        page: 1,
        loading: false,
        moreData: true
      };
    },
    mounted() {
      let that = this;
      // debugger
      let id = this.$route.params.id;
      this.wzid = id;
      let userinfo = sessionStorage.getItem('userinfo');
      let vipcode = '';
      if (userinfo != null) {
        userinfo = JSON.parse(userinfo);
        vipcode = userinfo.vipcode;
        that.openid = userinfo.openid;
        that.vipcode = userinfo.vipcode;
      }
      api.getWz(this, id, vipcode, res => {
        that.newsPageData = res.data.data;
        if (res.data.data) {
          read();
        }
      });

      function read() {
        api.getUserInfo(that, res => {
          if (res.data.code === 0) {
            let userInfo = res.data.data;
            that.userInfo = userInfo;
            let xm = userInfo.XF_SURNAME || '';
            api.saveYd(that, id, userinfo.openid, vipcode, xm, res => {
              if (res.data.code === 0) {
                if (res.data.data > 0) {
                  Toast({
                    message: "阅读获得" + res.data.data + "积分",
                    iconClass: 'iconfont icon-duigou yhx',
                    duration: 3000
                  });
                }
              }
              that.newsPageData.YDS += 1
            });
            that.getPlList();
          }else if(res.data.code === 9999){
            //orcal数据库异常 关闭当前窗口
            MessageBox.alert(res.data.msg, '温馨提示').then(action => {
              wx.closeWindow()
            })
          }
        });
      }
    },
    methods: {
      loadMore() {
        if (this.moreData) {
          this.loading = true;
          this.page += 1;
          this.getPlList(true);
        }
      },
      openPj() {
        let that = this;
        if (that.userInfo) {
          that.popupVisible = true;
        } else {
          Toast({
            message: '您还不是会员，快去注册吧！',
            duration: 1200
          });
          setTimeout(function () {
            that.$router.push({path: '/register'});
          }, 1500)
        }
      },
      getPlList(isLoadMore) {
        let that = this;
        if (!isLoadMore) {
          this.page = 1;
        }
        api.wz_getPlList(this, this.wzid, 10, this.page, res => {
          let list = res.data.data;
          list.map(x => {
            x.date = that.timestampToTime(x.PLSJ.time);
            return x;
          });
          if (isLoadMore) {
            that.pllist = this.pllist.concat(list);
            that.loading = false;
          } else {
            that.pllist = list;
          }
          if (list.length === 0) {
            that.moreData = false;
          }
        })
      },
      dzFn() {
        let that = this;
        if (that.newsPageData.SFDZ === 1) {
          if (that.userInfo) {
            let xm = that.userInfo.XF_SURNAME || '';
            api.saveDz(that, that.wzid, that.openid, that.vipcode, xm, res => {
              if (res.data.code === 0) {
                let message;
                if (res.data.data == 0) {
                  message = '点赞成功';
                } else {
                  message = "点赞获得" + res.data.data + "积分";
                }
                Toast({
                  message: message,
                  iconClass: 'iconfont icon-duigou yhx',
                  duration: 3000
                });
                that.newsPageData.DZS += 1;
              } else {
                Toast({
                  message: '您已经赞过了',
                  duration: 3000
                });
              }
            })
          } else {
            Toast({
              message: '您还不是会员，快去注册吧！',
              duration: 1200
            });
            setTimeout(function () {
              that.$router.push({path: '/register'});
            }, 1500)
          }
        }
      },
      timestampToTime(timestamp) {
        let date = new Date(timestamp);
        let Y = date.getFullYear() + '-';
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
          + '-';
        let D = addZero(date.getDate()) + ' ';
        let h = addZero(date.getHours()) + ':';
        let m = addZero(date.getMinutes()) + ':';
        let s = addZero(date.getSeconds());
        return Y + M + D + h + m + s;

        function addZero(n) {
          return n < 10 ? '0' + n : n;
        }
      },
      faplfn() {
        let that = this;
        let xm = that.userInfo.XF_SURNAME || '';
        if (that.plcontent == '') {
          Toast({
            message: "请填写评论内容",
            duration: 3000
          });
          return
        }
        api.savePl(that, that.wzid, that.openid, that.vipcode, xm, this.plcontent, res => {
          if (res.data.code === 0) {
            let message;
            if (res.data.data == 0) {
              message = '评论成功';
            } else {
              message = "评论获得" + res.data.data + "积分";
            }
            Toast({
              message: message,
              iconClass: 'iconfont icon-duigou yhx',
              duration: 3000
            });
            let date = new Date().getTime();
            date = that.timestampToTime(date);
            // that.pllist.push({XM: xm, PL: that.plcontent, date: date});
            that.plcontent = '';
            that.getPlList(false);
            that.newsPageData.PLS += 1
          } else {
            Toast({
              message: '您已经评论过了',
              duration: 3000
            });
          }
          that.popupVisible = false;
        })
      }
    }
  };
</script>

<style scoped lang="less">
  .detailbox {
    padding: 0 0.2rem;
    > .bt {
      font-size: 0.4rem;
      line-height: 0.56rem;
      word-break: break-all;
      font-weight: bold;
      padding: 0.3rem 0 0.3rem 0;
    }
    > .weizhi {
      font-size: 0.24rem;
      color: #999999;
      padding-bottom: 0.1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .sj {
      }
      .ly {
        flex: auto;
        padding-left: 0.2rem;
      }
      .zan {
        display: flex;
        line-height: 0;
        //垂直方向元素居中，两边留白
        align-items: center;
        i {
          font-size: 0.4rem;
          // margin-top: 0.5rem;
        }
      }
    }
    > .content {
      padding: 0.2rem 0;
      text-align: justify;
      color: #333333;
      p {
        margin-bottom: 0.2rem;
        font-size: 0.32rem;
        line-height: 0.48rem;
      }
      img {
      }
    }
    > .sxp {
      padding: 0.3rem;
      text-align: right;
    }
    > .yd {
    }
    > .zan {
      background-color: #d90916;
      text-align: center;
      color: #ffffff;
    }
    > .zanbox {
      display: flex;
      justify-content: center;
      align-items: center;
      justify-content: space-between;
      padding: 0.5rem 0.6rem;
      color: #999999;
      font-size: 0.28rem;
      .zan {
        border-radius: 0.8rem;
        border: 1px solid #e1e1e1;
        height: 0.7rem;
        line-height: 0.7rem;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 40%;

        i {
          font-size: 0.4rem;
        }
        span {
          color: #ffffff;
          background-color: #d90916;
          border-radius: 0.5rem;
          height: 0.36rem;
          line-height: 0.4rem;
          font-size: 0.24rem;
          padding: 0 0.1rem;
          position: absolute;
          top: -0.2rem;
          right: 0.1rem;
        }
      }
    }
  }

  // 评论
  .plbox {
    padding: 0.2rem;

    color: #333333;
    .pltop {
      display: flex;
      align-content: center; //垂直
      // justify-content: center;//水平
      justify-content: space-between;
      font-size: 0.32rem;
      i {
        font-size: 0.36rem;
        // width: 100px;
        // background-color: #d90916;
        color: #d90916;
      }
    }
    .pllist {
      ul {
        li {
          a {
            padding-left: 0;
            padding-right: 0;
            .image {
              width: 0.8rem;
              height: 0.8rem;

              img {
                height: 100%;
                border-radius: 50%;
              }
            }
            .text {
              padding-left: .2rem;
              .bt {
                padding-top: 0.15rem;
                line-height: 0.42rem;
              }
              flex: 1;
              .sjbox {
                padding-top: 0.05rem;
              }
            }
          }
        }
      }
    }
  }

  .bt_bar {
    padding: .2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    #yd {
      color: #999;
    }
    #dz {
      color: #576b95;
    }
  }

  #pl {
    /*display: flex;*/
    /*align-items: center;*/
    font-weight: normal;
    /*margin-left: .2rem;*/
    font-size: 16px;
    .icon-iconfontpinglun {
      line-height: 1.17em;
    }
  }

  // 发表评论
  .fbpl {
    width: 100vw;
    padding: .2rem;
    box-sizing: border-box;
    .fbpltop {
      padding: 0.3rem 0;
    }
    .wbk {
      border-radius: 0rem;
      border: 1px solid #f1f1f1;
    }
    .fban {
      margin-top: 0.2rem;
    }
  }

  .yl {
    display: flex;
    align-items: center;
    color: #576b95;
    font-size: .25rem;
  }

  .iconfont {
    font-size: .3rem;
  }

  .tips {
    padding: .2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    height: calc(~'100vh - 296px');
    > img {
      width: 70%;
      margin: .2rem;
    }
    > p {
      font-size: .3rem;
      margin: .2rem;
    }
    > button {
      margin-top: .2rem;
      width: 50%;
    }
  }
</style>
